<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01fix定位移动端键盘弹出</title>
</head>
<style>
  body {
    margin: 0;
    padding: 0;
  }

  .box {
    background-color: #E4D6C2;
    min-height: 100vh;
    position: relative;
  }

  .content {
    height: 60vh;
    padding: 20px;
    height: 100vh;
    /* 限制高度 给与滚动 */
    overflow: auto;
  }

  .text {
    height: 1000px;
  }

  .btn {
    /* 绝对定位 */
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translate(-50%, -10%);
  }

  .btn>div {
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 20px;
    border: 1px solid #ccc;
  }

</style>

<body>
  <div class="box">
    <div class="content">
      <div class="text">我是内容</div>
      <div class="form">
        姓名：<input type="text"><br />
        电话：<input type="text"><br />
        地址：<input type="text"><br />
        备注：<input type="text"><br />
      </div>
    </div>
    <div class="btn">
      <div>我是按钮</div>
    </div>
  </div>

  <script>
    /**
     * 键盘高度适配
     */
    function fixedKeyboard() {
      var client_h = document.documentElement.clientHeight;
      $(window).on("resize", function () {
        if (/iphone|ipad/i.test(navigator.userAgent.toLowerCase())) {
          //ios这块什么都不用做
        } else {
          //安卓触发window.resize
          var body_h = document.documentElement.clientHeight;
          if (client_h > body_h) {
            $('.donwload-btn_fix').css('position', 'static')
            console.log("ad小了");
          } else {
            $('.donwload-btn_fix').css('position', 'fixed')
            console.log("ad正常")
          }
        }

      })
    }

    fixedKeyboard();

  </script>
</body>

</html>
